<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
    /*设置奇数行颜色*/
    table tr:nth-child(odd)
    {
    background: #d9edf7;
    }
    /*设置偶数行颜色*/
    table tr:nth-child(even)
    {
    background: #FFF8DC;
    }
    </style>
</head>
<body>
    <h2>习题</h2>
    <br>
    <button type="button" class="btn btn-info" id="add">新增</button>
    <button type="button" class="btn btn-info" id="delete">删除</button>
    <button type="button" class="btn btn-info" id="modify">编辑</button>
    <button type="button" class="btn btn-info" id="search">查询</button>
    <input type="text" id="search_id" placeholder="按工号查询">
    <input type="text" id="search_name" placeholder="按姓名查询">
    <br>
    <br>
    <div id="addForm" hidden>
        <form id="formform">
        工号:<input type="text" id="UserId" style="width: 100px;" placeholder="请输入工号">
        姓名:<input type="text" id="UserName" style="width: 100px;" placeholder="请输入姓名">
        性别:　男<input type="radio" name="Gender" value="男" checked>
               女<input type="radio" name="Gender" value="女">
        密码:<input type="text" id="Password" style="width: 100px;" placeholder="请输入密码">
        年龄:<input type="text" id="Age" style="width: 100px;" placeholder="请输入年龄">
        出生日期:<input type="date" id="Birth" style="width: 200px;" placeholder="请输入出生日期">
        </form>
        <button type="button" class="btn btn-info" id="addUser">新增用户</button>
        <button type="button" class="btn btn-info" id="canceladd">取消新增</button>
    </div>
    
    
    
    <table class="table table-responsive .table-striped" id="tabInfo">
          
          <thead>
            <tr style="background-color: white;">
              <th>序号</th>
              <th>工号</th>
              <th>姓名</th>
              <th>性别</th>
              <th>密码</th>
              <th>年龄</th>
              <th>出生日期</th>
            </tr>
          </thead>
          <tbody>
            <tr >
              <td><input type="checkbox"> </td>
              <td>1001</td>
              <td>张三</td>
              <td>女</td>
              <td>1234</td>
              <td>29</td>
              <td>1991-01-01</td>
        
            </tr>
            <tr >
                  <td><input type="checkbox"> </td>
                  <td>1002</td>
                  <td>李四</td>
                  <td>男</td>
                  <td>1234</td>
                  <td>28</td>
                  <td>1992-02-02</td>   
            </tr>
            <tr >
                  <td><input type="checkbox"> </td>
                  <td>1003</td>
                  <td>王五</td>
                  <td>女</td>
                  <td>1234</td>
                  <td>27</td>
                  <td>1993-03-03</td>
            </tr>
            <tr >
                  <td><input type="checkbox"> </td>
                  <td>1004</td>
                  <td>赵六</td>
                  <td>女</td>
                  <td>1234</td>
                  <td>26</td>
                  <td>1994-04-04</td>
            </tr>
        </tbody>
           
        </table>
        <div hidden id="backdiv">
            <button type="button" class="btn btn-info" id="back" >返回</button>
        </div>
        <div hidden id="savediv">
            <button type="button" class="btn btn-info" id="save" >保存</button>
        </div>
        <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
         <script src="js/jquery-3.3.1.min.js"></script>
        <!-- 包括所有已编译的插件 -->
         <script src="js/bootstrap.min.js"></script>
         <script>
             //将表单设为显示
             $("#add").click( function(){
                   
                $("#addForm").show();

             });
             $("#canceladd").click( function(){
                   
                   $("#addForm").hide();
                   document.getElementById("formform").reset()
                });
             //添加用户
             $("#addUser").click( function(){
                //1.获取表单数据
                //获得表单的工号，判断非空
                var $UserId =  $("#UserId").val();
                if($UserId.length == 0){
                    alert("工号不能为空！");
                    return;
                }
                //获得表单的姓名，判断非空
                var $UserName =  $("#UserName").val();
                if($UserName.length == 0){
                    alert("姓名不能为空！");
                    return;
                }
                //获得表单的性别
                var $Gender = $('input[name="Gender"]:checked').val(); 
                //获得表单的密码，判断非空
                var $Password =  $("#Password").val();
                if($Password.length == 0){
                    alert("密码不能为空！");
                    return;
                }
                //获得表单的年龄，判断非空
                var $Age =  $("#Age").val();
                if($Age.length == 0){
                    alert("年龄不能为空！");
                    return;
                }
                //获得表单的生日，判断非空
                var $Birth =  $("#Birth").val();
                if($Birth.length == 0){
                    alert("请填写出生日期！");
                    return;
                }
                //2. 找表格
                var tabNode = document.getElementById("tabInfo");
                //3. 产生一个新的tr
                var trNode = tabNode.insertRow();
                //3.1创建复选框
                var checkboxTdNode = trNode.insertCell(0);
                $checkBox='<input type="checkbox">';
                checkboxTdNode.innerHTML = $checkBox;
                //3.2创建id框
                var useridTdNode = trNode.insertCell(1);
                useridTdNode.innerHTML=$UserId;
                //3.3创建姓名框
                var usernameTdNode = trNode.insertCell(2);
                usernameTdNode.innerHTML = $UserName;
                //3.4创建性别框
                var genderTdNode = trNode.insertCell(3);
                genderTdNode.innerHTML = $Gender;
                //3.5创建密码框
                var passwordTdNode = trNode.insertCell(4);
                passwordTdNode.innerHTML = $Password;
                //3.6创建年龄框
                var ageTdNode = trNode.insertCell(5);
                ageTdNode.innerHTML = $Age;
                //3.7创建生日框
                var birthTdNode = trNode.insertCell(6);
                birthTdNode.innerHTML = $Birth;
                
                //4.隐藏表单
                $("#addForm").hide();
                //5.将表单内容清空
                document.getElementById("formform").reset()
                $("tbody tr").show();
                $("#backdiv").hide();
                alert("添加成功！")
                 });
         
            //删除选中行
            $("#delete").click(function(){
                //获取所有复选框
                var checkboxes = $("input[type='checkbox']");
                //遍历所有复选框
                for(var i = 0 ;i< checkboxes.length ;i++){
                    if($(checkboxes[i]).is(":checked")){
                    $(checkboxes[i]).parents("tr").remove();
                    }
                 }
                
            });
            //根据工号和姓名查询员工
            $("#search").click(function(){
                //获取表单的工号
                var $search_id =  $("#search_id").val();
                if($search_id.length == 0){
                    alert("工号不能为空！");
                    return;
                }
                //获得表单的姓名
                var $search_name =  $("#search_name").val();
                if($search_name.length == 0){
                    alert("姓名不能为空！");
                    return;
                }
                             
                //获取所有td
                var tds = $("td");
                //循环遍历所有td
                for(var i = 0 ;i< tds.length ;i++){
                    //先判断工号
                    if( tds[i].innerHTML==$search_id){
                        //再判断姓名
                        if(tds[i].nextSibling.innerHTML==$search_name){
                            //alert("找到了");
                            //如果找到，先把所有tr隐藏，再把找到的tr显示
                            $("tbody tr").hide();
                            $(tds[i]).parent().show();
                            //把返回键显示出来
                            $("#backdiv").show();
                            return;
                        }
                    }
                 }
                alert("没找到相关的员工！");
            });
            //返回键，把所有tr显示
            $("#back").click(function(){
                $("tbody tr").show();
                $("#backdiv").hide();
            });
            //编辑功能
            $("#modify").click(function(){
                
                
                //获取所有已选中的复选框
                var checkboxes = $("input[type='checkbox']:checked");
                if(checkboxes.length==0){
                    alert("你未选中任何复选框！请重新选择！");
                    return;
                }
                //遍历所有已选中的复选框
                for(var i = 0 ;i< checkboxes.length ;i++){
                    //len为一行表格的单元格数
                    var len = $(checkboxes[i]).parents("tr").children().length;
                    //遍历每个单元格
                    for(var j=1;j<len;j++){
                        //判断是否已经加上了class='newinput'
                        if(!$(checkboxes[i]).parents("tr").find("td:eq("+j+")").is('.newinput')){
                            //如果没，则加上class='newinput'，并将td里面的内容加上一个input标签
                            $(checkboxes[i]).parents("tr").find("td:eq("+j+")").addClass('newinput').html('<input type="text" value="'+$(checkboxes[i]).parents("tr").find("td:eq("+j+")").text()+'"/>');
                        }
                        }
                    //}
                 }
                //显示保存按钮
                $("#savediv").show();
            });
            //保存编辑的内容
            $("#save").click(function(){
                //获取带有class='newinput'的td标签
                var list = $("[class='newinput']");
                //遍历带有class='newinput'的td标签
                for(var i = 0;i<list.length;i++){
                    //找到子标签input并获取里面的内容，赋值给info
                    var info = $(list[i]).find("input").val();
                    //删除class='newinput'，并将td内容改为info
                    $(list[i]).removeClass('newinput').html(info);
                }
                $("#savediv").hide();
            });
         </script>
</body>
</html>